{% extends 'base.html' %}
{% block title %}
    新建文章
{% endblock %}
{% block css %}
<link href="/static/editor.md/css/editormd.min.css" rel="stylesheet" />
{% endblock %}
{% block content %}
	<div class="content">
		<div class="content-heading">
			<div class="container">
				<h1 class="heading" align="center">文章新建</h1>
			</div>
		</div>
		<div class="container" align="center">
			<section class="content-inner" >
				<form class="form" align="center">
					<fieldset>
						<legend>「{{ user.username }}」</legend>
                        {% csrf_token %}
						<div class="form-group form-group-label">
                                <div class="col-md-6">
                                <label class="floating-label" for="float-text">标题</label>
                                <input class="form-control" id="title" type="title">
                                </div>
						</div>
						<div class="form-group form-group-label">
                            <div class="col-md-6">
                                <label class="floating-label" for="float-select-disabled">分类</label>
                                <select class="form-control" id="category">
                                    {% for category in categorys %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
						</div>
                        <div class="form-group-btn">
                            <p1></p1>
                        </div>
                        <div class="form-group-btn">
                            <button class="btn btn-blue waves-button waves-light waves-effect save" type="submit">保存</button>
                            <button1 class="btn waves-button waves-effect" type="button"><a href="/">取消</a></button1>
                        </div>
						<div class="form-group form-group-label">
                            <div id="content-editor">
                                <textarea style="display:none;" id="content" name="content"></textarea>
                            </div>
						</div>
					</fieldset>
                    <div class="form-group-btn">
                        <p1></p1>
                    </div>
					<div class="form-group-btn">
						<button class="btn btn-blue waves-button waves-light waves-effect save" type="submit">保存</button>
                        <button1 class="btn waves-button waves-effect" type="button"><a href="/">取消</a></button1>
					</div>
				</form>
			</section>
		</div>
	</div>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="/static/jquery-3.5.1.min.js"></script>
    <script src="/static/editor.md/editormd.min.js"></script>
    <script type="text/javascript">
        $("body").on("click",".save",function(){
            $('button').attr('disabled', 'disabled').text('LOADING...');
            $.ajax({
                url:'{% url 'article:new_article' %}',
                type:'POST',
                data:{'title':$('#title').val(),
                      'category':$('#category').val(),
                      'content':$('#content').val(),
                      'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()},
                success:function(data){
                    var dataObj=JSON.parse(data);
                    if(dataObj['status']){
                        $('button').removeAttr('disabled').text('保存');
                        $('p1').text(dataObj.message)
                        setTimeout(function(){ window.location = '/article/' + dataObj.articleId + '.html'}, 3000)
                    }
                    else{
                        $('button').removeAttr('disabled').text('保存');
                        $('p1').text(dataObj.message)
                    }
                }
            })
        });
var content;
content = editormd("content-editor", {
     placeholder:'本条目支持使用Markdown语法编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
     width: "90%",
     height: 640,
     syncScrolling: "single",
     path: "/static/editor.md/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
     saveHTMLToTextarea: true,
     emoji: true,
     taskList: true,
     tocm: true,         // Using [TOCM]
     tex: true,                   // 开启科学公式TeX语言支持，默认关闭
     flowChart: true,             // 开启流程图支持，默认关闭
     sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
     imageUpload    : true, //开启图片上传
     imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
     imageUploadURL : "{% url 'article:upload_img' %}",
     toolbarIcons : function() {
         return [
             "undo", "redo", "|",
             "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
             "h1", "h2", "h3", "h4", "h5", "h6", "|",
             "list-ul", "list-ol", "hr", "|",
             "reference-link", "image", "code", "preformatted-text", "table", "datetime", "emoji", "html-entities", "|",
             "watch", "preview", "|",
             "help"
         ]
     },
});
    </script>
{% endblock %}
